<template>
	<view class="">
		<view class="Topbg">


		</view>

		<view class="move">
			<view class="mode" style="position: relative;">
				
			
				
				<view style="margin:0 auto 40rpx auto;width: 140rpx;">

					<u-image src="/static/Group_90.png" width="140" height="60"></u-image>
				</view>
				<view class="u-flex u-row-between u-margin-top-80">
					<view class="u-flex">
						<u-image :src="imagesurl+'/images/my_1.png'" width="60" height="60"></u-image>
						<text class="moneny u-margin-left-20">{{moneny}}</text>
					</view>
					<view class="u-flex">
					
						<view class="btn " style="background:#2979ff">
					 <navigator url="../rule/index?id=7">了解规则</navigator>		
							</view>
						<view class="btn red" @click="go">去拼团</view>
						
			    	</view>
				</view>
			</view>
			<u-tabs :list="nav" :is-scroll="false" :current="current" @change="change" active-color="#628DFF"
				inactive-color="#333" bg-color="{background:'transparent'}"></u-tabs>
		
			
			
			<view class="c_bg" v-for="(item,index) in list" :key="index" :class="current?'ed':''" 	:style="{backgroundImage:'url('+imagesurl+'/images/counpondbg.png)'}">
				<view class="c_bg_1" :class="current==0 || current==2?'old':''" >
					<view>
						<text>￥</text><text class="price">{{item.money}}</text>
					</view>
					<view style="margin-left: 20rpx;line-height: 50rpx;">
						<view>元代金券</view>
						<view class="day">
						{{item.status==1?'已使用':''}}
							{{item.status==2?'未使用':''}}
								{{item.status==3?'已过期':''}}
						</view>
					</view>
				</view>
				<view class="des" :class="current==0 || current==2?'desed':''" >代金券有效期至:{{item.endStr}}</view>
			</view>
			
			
			
			
			
			<u-loadmore :status="status" />
			
		</view>
		
		
		
		
		

	</view>
</template>

<script>

	import payway from '../../common/wxpay.js';
	import url from '@/common/baseUrl.js';

	export default {

		data() {
			return {
				imagesurl: url.imageUrl,
				moneny: "",
				status: 'loadmore',
				page: 1,
				nav: [{
					name: '已使用'
				}, {
					name: '可使用'
				}, {
					name: '已过期',
				}],
				current: 0,
				
				list:[]
			
			
			}
		},
		onLoad() {
			this.jiazai()
			this.information()
		},
		onReachBottom() {
			if (this.status == 'nomore') {
		
			} else {
				this.jiazai()
			}
		
		},
		methods: {
			go(){
				uni.navigateTo({
					url:"/pages/teamAtive/index"
				})
			},
	        change(index) {
				this.current = index;
				this.page=1;
				this.jiazai()
			}, 
			jiazai(){
				this.$u.post('/api/user/voucher', {
				   status:this.current+1,
				   page:this.page,
				}, {}).then(res => {
				   var resList = res.data.data
				   if (this.page == 1) {
				   	this.list = []
				   }
				   if (resList.length > 9) {
				   	this.status = 'loadmore'
				   	this.page = this.page + 1
				   } else {
				   	this.status = 'nomore'
				   }
				   this.list = this.list.concat(resList)
				   this.loading = false
				   
										 
				}).catch(err => {})
			},
			information(){
				this.$u.post('/api/user/information', {
					
				}, {}).then(res => {
					
					this.moneny=res.data.voucherNum
				}).catch(err => {})
			}
			
		
		}
	}
</script>

<style lang="scss">
	@import 'common.css';
	
	.c_bg {
		width: 600rpx;
		height: 300rpx;
		background-size: cover;
		margin: 40rpx auto;
		// opacity: 0.6;
	
		padding: 40rpx 60rpx;
		color: #FFFFFF;
	
		.c_bg_1 {
			display: flex;
			align-items: center;
		}
	
		.price {
			font-size: 120rpx;
		}
	
	
	
		.des {
			width: 460rpx;
			height: 55rpx;
			margin: auto;
			color: #A65A00;
			background: #FAE205;
			line-height: 55rpx;
			font-size: 24rpx;
			text-align: center;
			font-weight: bold;
			
		}
	}
	.desed{
	   background: #FFFFFF!important;
	   color: #628DFF!important;
	 }
		 
	 .old{
		  color: #628DFF!important;
	 }
	.ed{
	     background-image: url(../../static/Subtracted.png);
	}
</style>
 